<template>
    <div class="schedule-info">
        <span>周{{ attendance.schedule.day }}第{{
            attendance.schedule.startPeriod
        }}-{{
                attendance.schedule.endPeriod }}节</span>
        <span>{{ attendance.schedule.courseName }}</span>
        <el-tag :type="getStatusTagType(attendance)">
            {{ getStatus(attendance) }}
        </el-tag>

        <el-tag>
            {{ attendance.state }}
        </el-tag>

        <van-button class="custom-small-button" v-if="startable(attendance.state)" type="primary" size="mini"
            @click="$emit('handle', 'start', attendance, student.id)">
            开始签到
        </van-button>
        <van-button class="custom-small-button" v-if="checkabe(attendance.state)" type="primary" size="mini"
            @click="$emit('handle', 'check', attendance, student)">
            签到
        </van-button>
        <van-button class="custom-small-button" v-if="lockable(attendance.state)" type="primary" size="mini"
            @click="$emit('handle', 'lock', attendance, student)">
            锁定
        </van-button>
    </div>
</template>

<script>
export default {
    props: {
        attendance: {
            type: Object,
            required: true
        },
        student: {
            type: Object,
            default: () => ({
                id: '123', isAdmin
            }),
            required: true
        }
    }, methods: {
        getStatus(attend) {
            const status = attend.state;
            if (!attend.state) {
                return '未开始';
            } else if (attend.detailStatus == null) {
                return '缺勤'
            } else {
                return attend.detailStatus;
            }
        }, getStatusTagType(attend) {
            const status = this.getStatus(attend);
            if (!attend.state || attend.detailStatus == null) {
                return 'info';
            }
            const statusMap = {
                '未开始': 'info',
                '已签到': 'success',
                '缺勤': 'danger',
                '迟到': 'warning',
                '早退': 'warning',
                '事假': 'info',
                '病假': 'info',
                '公假': 'info'

            };
            return statusMap[status] || 'info';
        },
        checkabe(state) {
            return state == '考勤中';
        },
        lockable(state) {
            return state == '考勤中';
        },
        submitable(state) {
            return state == '已锁定';
        },
        tuneable(state) {
            return state == '已锁定';
        },
        startable(state) {
            return state == '未考勤' || state == '未开始' || state == '' || state == null;
        },
    }
}
</script>

<style scoped>
.schedule-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.custom-small-button {
    padding: 4px 8px;
    font-size: 12px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 4px;
}

.custom-small-button:hover {
    background-color: #0056b3;
}
</style>